<template>
  <div class="header-contain">
    <div class="header-wrapper">
      <div class="header-logo">
        <img src="https://img.easytransfer.cn/img/www/img/etIcon/navLogo_dark.svg" />
      </div>
      <div class="header-nav-contain">
        <ul class="nav">
          <li class="nav-item-wrapper"><router-link class="nav-item home" to="/">
            首页
          </router-link></li>
          <li class="nav-item-wrapper"><router-link class="nav-item money" to="/login">
            我要交费
          </router-link></li>
          <li class="nav-item-wrapper"><router-link class="nav-item center" to="/login">
            用户中心
          </router-link></li>
          <li class="nav-item-wrapper"><router-link class="nav-item help" to="/login">
            帮助
          </router-link></li>
          <li class="nav-item-wrapper"><router-link class="nav-item telephon" to="/login">
            400-885-9993
          </router-link></li>
          <li class="nav-item-wrapper"><router-link class="nav-item login" to="/login">
            登陆/注册
          </router-link></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.header-contain {
  background-color: #d6e7ff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 1rem;
}
.header-wrapper {
  max-width: 1140px;
  box-sizing: border-box;
  padding: 0 15px;
  margin: auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-logo {
  height: 50px;
  width: 150px;
  margin: 0.3125rem 1rem 0.3125rem 0;
}
.nav {
  display: flex;
  align-content: center;
  margin-left: auto;
}
.nav-item-wrapper{
  padding: 0 20px;
}
.nav-item {
  min-width: 114px;
  padding: 2px 20px;
  color: #4a4a4a;
}
.nav-item:hover{
color: #4482e0;
}
.login{
  background-color: #427ed8;
  color:#fff;
  border-radius: 12.5px;
  min-width: 114px;

}
</style>
